<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ealert</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

</head>
<body>
<style>
    /*html, body {
        height: 100%;
        padding: 0;
        margin: 0;
    }

     .eAlertMaskID {
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         z-index: 9999;
         position: fixed;
         top: 0px;
         left: 0px;
         box-sizing: border-box;
     }

     .promptBlock {
         width: 70%;
         background: #FFFFFF;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         border-radius: 10px;
         padding: 10px 0;
         box-sizing: border-box;
     }

     .eAlertMaskID .msgBlock {
         text-align: center;
         padding: 10px 20px;
         line-height: 26px;
         word-break: break-all;
     }

     .eAlertMaskID .ealerttype1 .ybtn {
         line-height: 40px;
         text-align: center;
     }

     .eAlertMaskID .ealerttype2 {
         overflow: hidden;
         padding: 0 25px;
     }

     .eAlertMaskID .ealerttype2 > div {
         line-height: 40px;
         text-align: center;
         width: 50%;
         float: left;
     }*/

</style>

<img src="img/test1.jpeg">
<img src="img/test1.jpeg">
<img src="img/test1.jpeg">


<!--<script src="modules/jquery.min.js"></script>-->
<script src="mymodel/Ealert.js"></script>
<script>

    (function () {
        window.alert = function (msg, parame) {
            console.log(msg);
            var parame = parame || {};
            //默认配置
            var config = {
                Mask: true,//是否显示遮罩层
                type: 1,
                msgBtnY: '确定',
                msgBtnN: '取消'
            };

            Object.assign(config, parame);

            var promptMask = document.createElement('div');//遮罩层
            promptMask.className = 'eAlertMaskID';
            promptMask.style = 'width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 9999;position: fixed;top: 0px;left: 0px;box-sizing: border-box;';

            var promptBlock = document.createElement('div');//对话框模块
            promptBlock.className = 'promptBlock';
            promptBlock.style = 'width: 70%;background: #FFFFFF;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 10px;padding: 10px 0;box-sizing: border-box;';

            var eAlertstyle = document.createElement('style');//对话框模块
            eAlertstyle.innerHTML = 'html, body {height: 100%;padding: 0;margin: 0;overflow: hidden;}.eAlertMaskID .msgBlock {text-align: center;padding: 10px 20px;line-height: 26px;word-break: break-all;}.eAlertMaskID .ealerttype1 .ybtn {line-height: 40px;text-align: center;}.eAlertMaskID .ealerttype2 {overflow: hidden;padding: 0 25px;}.eAlertMaskID .ealerttype2 > div {line-height: 40px;text-align: center;width: 50%;float: left;}';

            var msgDivAry = ['<div class="msgBlock">', msg, '</div>'];//tips数组
            var alerttype1 = ['<div class="ealerttype1"><div class="ybtn">', config.msgBtnY, '</div></div>'],
                    alerttype2 = ['<div class="ealerttype2"><div class="ybtn">', config.msgBtnY, '</div><div class="nbtn">', config.msgBtnN, '</div></div>'];//按钮数组

            var btnAry = [[], alerttype1, alerttype2];//类型数组集
            msgDivAry = [...msgDivAry,
            ...
            btnAry[config.type]
            ]
            ;//合并内容 选择按钮类型

            var _Body = document.querySelector('body');
            promptMask.appendChild(promptBlock);
            _Body.appendChild(promptMask);//插入遮罩层+内容Block
            _Body.appendChild(eAlertstyle);
            promptBlock.innerHTML = msgDivAry.join('');//插入tip内容和按钮

            //绑定回调
            if (({}).toString.call(config.fn_cb_y) === '[object Function]') {
                document.querySelector('.promptBlock .ybtn').onclick = function () {
                    config.fn_cb_y();
                    closeEalert();
                };
            }
            if (config.type == 2 && ({}).toString.call(config.fn_cb_n) === '[object Function]') {
                document.querySelector('.promptBlock .nbtn').onclick = function () {
                    config.fn_cb_n();
                    closeEalert();
                };
            }
            function closeEalert() {
                _Body.style = 'overflow:inherit !important';
                promptMask.style.display = 'none';
            }
        }
    })();

    alert('阿德阿德阿德埃杜阿多啊打阿德阿德阿德埃杜阿多啊打', {
        type: 2,
        fn_cb_y: function () {
            console.log('确定');
        }, fn_cb_n: function () {
            console.log('取消');
        }
    });

</script>
</body>
</html>